<template>

    <el-form ref="ruleFormRef" style="max-width: 600px;margin: 30px auto;" :model="form" :rules="rules"
        label-width="auto" class="demo-ruleForm" :size="formSize" status-icon>
        <el-form-item label="标题" prop="title">
            <el-input v-model="form.title" />
        </el-form-item>
        <el-form-item label="用途描述" prop="describe">
            <el-input v-model="form.describe" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark" />
        </el-form-item>
        <el-form-item label="选择使用物品" prop="article">
            <el-select v-model="form.article" placeholder="请选择">
                <el-option v-for="item in items" :label="item.goods_name" :value="item.goods_name"
                    @click="GetByid(item.goods_name)" />
            </el-select>
        </el-form-item>

        <el-table :data="info" border style="margin:20px 50px;">
            <el-table-column label=" 货物名称" prop="goods_name"></el-table-column>
            <el-table-column label="类型" prop="">
                <template #default="scope">
                    <el-if v-if="scope.row.type == 0">
                        车辆用品</el-if>
                    <el-if v-else-if="scope.row.type == 1">
                        办公用品</el-if>
                </template>
            </el-table-column>
            <el-table-column label="材质" prop="">
                <template #default="scope">
                    <el-if v-if="scope.row.material == 0">
                        金属</el-if>
                    <el-if v-else-if="scope.row.material == 1">
                        橡胶</el-if>
                    <el-if v-else-if="scope.row.material == 2">
                        塑料</el-if>
                    <el-if v-else-if="scope.row.material == 3">
                        液体</el-if>
                    <el-if v-else-if="scope.row.material == 4">
                        纸质</el-if>
                </template>
            </el-table-column>
            <el-table-column label="规格" prop="specification"></el-table-column>

            <el-table-column label="仓库数量" prop="num"></el-table-column>
            <el-table-column label="领用数量">
                <template v-slot="scope">
                    <el-input-number v-model="scope.row.acceptance_Num" :min="1" :max="10" @change="handleChange" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template v-slot="scope">
                    <el-button @click="del()" type="danger">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-form-item style="margin: 50px 150px">
            <el-button type="primary" @click="submitForm(ruleFormRef)">
                添加
            </el-button>
            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>

    </el-form>

</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
import axios from '../../../api/http'
import { useRouter, useRoute } from 'vue-router'
const route = useRoute()
const router = useRouter()


const form = reactive({


    "title": "",
    "describe": "",
    "remark": "",
    "article": "",
    "acceptance_Num": 0,
    "accpetance_Person": "",
    "approver": "",
    "auditStatus": 0,

})


const handleChange = (value: number) => {
    form.acceptance_Num = value;
    console.log(value)
}
//绑定下拉框
const items: any = ref([]);
const getItems = () => {
    axios.get("/setpath/api/Storage/GetStorageBand").then((res) => {
        items.value = res.result;

    })
    console.log(items.value);
}


onMounted(() => {
    getItems();
})





const rules = reactive<FormRules<RuleForm>>({
    title: [
        { required: true, message: '标题不能为空', trigger: 'blur' },
    ],
    describe: [
        { required: true, message: '描述不能为空', trigger: 'blur' },
    ],
    remark: [
        { required: true, message: '备注不能为空', trigger: 'blur' },
    ],
    article: [
        { required: true, message: '物品不能为空', trigger: 'blur' },
    ],
    acceptance_Num: [
        { required: true, message: '领用数量不能为空', trigger: 'blur' },
    ],


})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            axios.post("/setpath/api/Acceptance/AddAcceptance", form).then((res) => {
                console.log(res);
                if (res != null) {
                    ElMessage.success("添加成功")
                    router.push({ path: "/Acceptance" })

                } else {
                    ElMessage.error("添加失败")
                }
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}



//显示

const info = ref([])
const GetByid = (goods_name: any) => {
    // 请求数据
    axios.get("/setpath/api/Storage/GetByIdStorage?goodname=" + goods_name).then(res => {
        info.value = res.result
        console.log(info.value)
    });

}








</script>
